<template>
  <div>
    <el-row id="order_total">
      <el-col style="display:flex">
        <div
          class="order_content"
          :span="8"
          v-for="(item, index) in items"
          :key="index"
          @click="mouseEnter(index)"
          :class="{ active: index == isActive }"
        >
          <div
            class="order_total_title"
            style="height:120px;line-height:120px;"
          >
            {{ item }}
          </div>
        </div>
      </el-col>
    </el-row>

    <div v-show="paiming">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        @keyup.enter.native="search()"
      >
        <el-form-item label="起始时间">
          <br />
          <br />
          <el-date-picker
            v-model="formInline.runTimeRange"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            style="margin-left:-60px;width:400px"
            @change="search()"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          style="margin-left:700px;text-align:right;margin-top:30px"
        >
          <el-button
            type="success"
            @click="exportExcel()"
            size="mini"
            icon="el-icon-s-data"
            >导出</el-button
          >
        </el-form-item>
      </el-form>
      <div>
        <el-table
          :data="tableData"
          border
          :header-cell-style="{ background: '#ebecf0', color: '#606266' }"
          @sort-change="handleSortone"
        >
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="60"
          ></el-table-column>

          <el-table-column
            prop="upOrgZone"
            label="大区名称"
            align="center"
          ></el-table-column>

          <el-table-column
            prop="sellStoreAmount"
            label="销售店铺数量（家）"
            align="center"
          >
            <template slot="header" slot-scope="scope">
              <span
                >销售店铺数量（家）
                <el-popover
                  placement="top-start"
                  width="200"
                  trigger="hover"
                  content="有销售记录的店铺数量（已付款订单为准）"
                >
                  <el-button slot="reference" style="padding:0;border:0"
                    ><i class="el-icon-question"></i
                  ></el-button>
                </el-popover>
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="storeAmount"
            label="店铺总数量（家）"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="salesRate"
            label="大区动销率（％）"
            align="center"
            sortable="salesRate"
          >
            <template slot="header" slot-scope="scope">
              <span
                >大区动销率（％）
                <el-popover
                  placement="top-start"
                  width="200"
                  trigger="hover"
                  content="大区有销售记录云店店铺数量/大区云店店铺总数量*100％"
                >
                  <el-button slot="reference" style="padding:0;border:0"
                    ><i class="el-icon-question"></i
                  ></el-button>
                </el-popover>
              </span>
            </template>
          </el-table-column>
        </el-table>

        <div class="block" style="margin-top:10px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 30, 50, 100]"
            :current-page="listQuery.current"
            :page-size="listQuery.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>

    <div v-show="paimingone">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="大区名称">
          <br />
          <br />
          <el-input
            v-model="formInline.upOrgZone"
            placeholder
            style="margin-left:-60px;width:200px"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="营销区域名称">
          <br />
          <br />
          <el-input
            v-model="formInline.baseName"
            placeholder
            style="margin-left:-60px;width:200px"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item label="起始时间">
          <br />
          <br />
          <el-date-picker
            v-model="formInline.runTimeRange2"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            style="margin-left:-60px;width:400px"
          ></el-date-picker>
        </el-form-item>

        <el-form-item style="margin-left:700px;text-align:right;">
          <el-button
            type="primary"
            @click="kongone()"
            size="mini"
            icon="el-icon-delete"
            >清空</el-button
          >

          <el-button
            type="primary"
            @click="searchone()"
            size="mini"
            icon="el-icon-search"
            >查询</el-button
          >

          <el-button
            type="success"
            @click="exportExcelone()"
            size="mini"
            icon="el-icon-s-data"
            >导出</el-button
          >
        </el-form-item>
      </el-form>

      <div>
        <el-table
          :data="tableData1"
          border
          @sort-change="handleSorttwo"
          :header-cell-style="{ background: '#ebecf0', color: '#606266' }"
        >
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="60"
          ></el-table-column>
          <el-table-column
            prop="upOrgZone"
            label="大区名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="baseName"
            label="营销区域名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="sellStoreAmount"
            label="销售店铺数量（家）"
            align="center"
          >
            <template slot="header" slot-scope="scope">
              <span
                >销售店铺数量（家）
                <el-popover
                  placement="top-start"
                  width="200"
                  trigger="hover"
                  content="有销售记录的店铺数量（已付款订单为准）"
                >
                  <el-button slot="reference" style="padding:0;border:0"
                    ><i class="el-icon-question"></i
                  ></el-button>
                </el-popover>
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="storeAmount"
            label="店铺总数量（家）"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="salesRate"
            label="营销区域动销率（％）"
            align="center"
            sortable="salesRate"
          >
            <template slot="header" slot-scope="scope">
              <span
                >营销区域动销率（％）
                <el-popover
                  placement="top-start"
                  width="200"
                  trigger="hover"
                  content="营销区域有销售记录云店店铺数量/营销区域云店店铺总数量*100％"
                >
                  <el-button slot="reference" style="padding:0;border:0"
                    ><i class="el-icon-question"></i
                  ></el-button>
                </el-popover>
              </span>
            </template>
          </el-table-column>
        </el-table>

        <div class="block" style="margin-top:10px">
          <el-pagination
            @size-change="handleSizeChangeone"
            @current-change="handleCurrentChangeone"
            :page-sizes="[10, 20, 30, 50, 100]"
            :current-page="listQueryone.current"
            :page-size="listQueryone.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total1"
          ></el-pagination>
        </div>
      </div>
    </div>

    <div v-show="paimingtwo">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <!-- <el-row :span="24">
            <el-col :span="8"> -->
        <el-form-item label="大区名称">
          <br />
          <br />
          <el-input
            v-model="formInline.upOrgZone"
            placeholder
            style="margin-left:-60px;width:190px"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="营销区域名称">
          <br />
          <br />
          <el-input
            v-model="formInline.baseName"
            placeholder
            style="margin-left:-60px;width:190px"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="店铺授权编码">
          <br />
          <br />
          <el-input
            v-model="formInline.authCode"
            placeholder
            style="margin-left:-85px;width:190px"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="经销商名称">
          <br />
          <br />
          <el-input
            v-model="formInline.companyName"
            placeholder
            style="margin-left:-80px;width:190px"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="是否售出商品">
          <br />
          <br />
          <el-select
            v-model="formInline.isGoods"
            style="margin-left:-85px;width:190px"
            clearable
          >
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="店铺名称">
          <br />
          <br />
          <el-input
            v-model="formInline.storeName"
            placeholder
            style="margin-left:-60px;width:190px"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item label="选择时间">
          <br />
          <br />
          <el-date-picker
            v-model="value4"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            style="margin-left:-60px;width:350px"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item
          style="margin-left:700px;text-align:right;margin-top:30px"
        >
          <el-button
            type="primary"
            @click="kongtwo()"
            size="mini"
            icon="el-icon-delete"
            >清空</el-button
          >

          <el-button
            type="primary"
            @click="searchtwo()"
            size="mini"
            icon="el-icon-search"
            >查询</el-button
          >

          <el-button
            type="success"
            @click="exportExceltwo()"
            size="mini"
            icon="el-icon-s-data"
            >导出</el-button
          >
        </el-form-item>
      </el-form>
      <div>
        <el-table
          :data="tableData2"
          border
          row-key="id"
          align="left"
          :header-cell-style="{ background: '#ebecf0', color: '#606266' }"
        >
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="60"
          ></el-table-column>
          <el-table-column
            align="center"
            v-for="(item, index) in col"
            :key="`col_${index}`"
            :prop="dropCol[index].prop"
            :width="dropCol[index].width"
            :label="item.label"
            :sortable="item.sortable"
          >
            <template slot-scope="scope">
              <div v-if="dropCol[index].prop === 'isGoods'">
                <span v-if="scope.row.isGoods != '1'">否</span>
                <span v-if="scope.row.isGoods == '1'">是</span>
              </div>
              <div v-if="dropCol[index].prop != 'isGoods'">
                {{ scope.row[dropCol[index].prop] }}
              </div>
            </template>
          </el-table-column>
        </el-table>

        <div class="block" style="margin-top:10px">
          <el-pagination
            @size-change="handleSizeChangetwo"
            @current-change="handleCurrentChangetwo"
            :page-sizes="[10, 20, 30, 50, 100, 150, 200]"
            :current-page="listQuerytwo.current"
            :page-size="listQuerytwo.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total2"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Sortable from 'sortablejs';
import { getmemberrule, getMemberExcel } from '@/api/membergrade';
import {
  memberManage,
  updatememberinfo,
  delmemberinfo,
  queryStoreOrgseq,
  getGraCount,
  queryMemberDetail,
} from '@/api/memberinfo';
import {
  queryZqData,
  queryBaseData,
  queryStoreData,
  queryZqDataExcel,
  queryBaseDataExcel,
  queryStoreDataExcel,
} from '@/api/businessActivity';
import qs from 'qs';
export default {
  data() {
    return {
      col: [
        {
          label: '大区名称',
          prop: 'upOrgZone',
        },
        {
          label: '营销区域名称',
          prop: 'baseName',
        },
        {
          label: '经销商名称',
          prop: 'companyName',
        },
        {
          label: '店铺授权编码',
          prop: 'authCode',
        },
        {
          label: '店铺名称',
          prop: 'storeName',
        },
        {
          label: '是否售出商品',
          prop: 'isGoods',
        },
      ],
      dropCol: [
        {
          label: '大区名称',
          prop: 'upOrgZone',
        },
        {
          label: '营销区域名称',
          prop: 'baseName',
        },
        {
          label: '经销商名称',
          prop: 'companyName',
        },
        {
          label: '店铺授权编码',
          prop: 'authCode',
        },
        {
          label: '店铺名称',
          prop: 'storeName',
        },
        {
          label: '是否售出商品',
          prop: 'isGoods',
        },
      ],
      isActive: false,
      items: ['大区查看', '营销区域查看', '店铺查看'],
      paiming: true,
      paimingone: false,
      paimingtwo: false,
      value4: '',
      loading: true,
      options: [],

      dataorg: [],
      defaultProps: {
        children: 'children',
        label: '+',
        isLeaf: false,
      },
      listQuery: {
        current: 1,
        size: 100,
      },
      listQueryone: {
        current: 1,
        size: 10,
      },
      listQuerytwo: {
        current: 1,
        size: 10,
      },
      memberList: {},
      detailform: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
      dialogVisibledetail: false,
      total: 0,
      total1: 0,
      total2: 0,
      formInline: {
        sort: 1,
        upOrgZone: '',
        baseName: '',
        authCode: '',
        storeName: '',
        companyName: '',
        isGoods: '',
        runTimeRange: [],
        runTimeRange2: [],
      },
      data5: [],
      data3: [],
      data4: [],
      resone: [],
      objone: {},
      tableData: [],
      tableData1: [],
      tableData2: [],
      multipleSelection: [],
      radio: '',
      rolefenid: '',
      selected: {},
      form: {
        memberName: '',
        sex: '',
        memberType: '',
        membercardId: '',
        cellPhoneNo: '',
      },
      type: '1',
      orgList: {},
      roleid: '',
      dialogVisibleone: false,
      dialogVisibletwo: false,
      dialogVisible: false,
      ruledata: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近三天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.logininfo = localStorage.getItem('logininfo');
    this.orgList = JSON.parse(this.logininfo).orgList;
    this.formInline.orgName = this.orgList[0].orgName;
    this.resone = this.orgList[0].orgSeq;
    this._memberManage();
  },

  methods: {
    exportExcel() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        ascs: [],
        descs: [],
        condition: {
          beginDate:
            this.formInline.runTimeRange != null &&
            this.formInline.runTimeRange.length > 0
              ? this.formInline.runTimeRange[0]
              : '',
          endDate:
            this.formInline.runTimeRange != null &&
            this.formInline.runTimeRange.length > 0
              ? this.formInline.runTimeRange[1]
              : '',
          sort: this.formInline.sort,
          orgSeq: this.resone,
        },
      };
      queryZqDataExcel(data)
        .then((res) => {
          const link = document.createElement('a');
          let blob = new Blob([res], {
            type: 'application/vnd.ms-excel',
          });
          link.style.display = 'none';
          //设置连接
          link.href = URL.createObjectURL(blob);
          link.download = '动销数据导出（大区）.xlsx';
          document.body.appendChild(link);
          //模拟点击事件
          link.click();
        })
        .catch((err) => {
          console.log(err);
        });
    },

    exportExcelone() {
      let data = {
        size: this.listQueryone.size,
        current: this.listQueryone.current,
        ascs: [],
        descs: [],
        condition: {
          beginDate:
            this.formInline.runTimeRange2 != null &&
            this.formInline.runTimeRange2.length > 0
              ? this.formInline.runTimeRange2[0]
              : '',
          endDate:
            this.formInline.runTimeRange2 != null &&
            this.formInline.runTimeRange2.length > 0
              ? this.formInline.runTimeRange2[1]
              : '',
          upOrgZone: this.formInline.upOrgZone,
          baseName: this.formInline.baseName,
          sort: this.formInline.sort,
          orgSeq: this.resone,
        },
      };
      queryBaseDataExcel(data)
        .then((res) => {
          const link = document.createElement('a');
          let blob = new Blob([res], {
            type: 'application/vnd.ms-excel',
          });
          link.style.display = 'none';
          //设置连接
          link.href = URL.createObjectURL(blob);
          link.download = '动销数据导出（营销区域）.xlsx';
          document.body.appendChild(link);
          //模拟点击事件
          link.click();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    exportExceltwo() {
      let data = {
        size: this.listQuerytwo.size,
        current: this.listQuerytwo.current,
        ascs: [],
        descs: [],
        condition: {
          upOrgZone: this.formInline.upOrgZone,
          authCode: this.formInline.authCode,
          storeName: this.formInline.storeName,
          companyName: this.formInline.companyName,
          isGoods: this.formInline.isGoods,
          baseName: this.formInline.baseName,
          orgSeq: this.resone,
          beginDate: !this.value4
            ? ''
            : this.value4.length == 0
            ? ''
            : this.value4[0] + ' 00:00:00',
          endDate: !this.value4
            ? ''
            : this.value4.length == 0
            ? ''
            : this.value4[1] + ' 23:59:59',
        },
      };
      queryStoreDataExcel(data)
        .then((res) => {
          const link = document.createElement('a');
          let blob = new Blob([res], {
            type: 'application/vnd.ms-excel',
          });
          link.style.display = 'none';
          //设置连接
          link.href = URL.createObjectURL(blob);
          link.download = '动销数据导出（店铺）.xlsx';
          document.body.appendChild(link);
          //模拟点击事件
          link.click();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    kongone() {
      this.formInline.upOrgZone = '';
      this.formInline.baseName = '';
      this.formInline.sort = 1;
      this.formInline.runTimeRange2 = [];
    },
    kongtwo() {
      this.formInline.sort = 1;
      this.formInline.authCode = '';
      this.formInline.storeName = '';
      this.formInline.upOrgZone = '';
      this.formInline.baseName = '';
      this.formInline.isGoods = '';
      this.formInline.companyName = '';
    },

    search() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        ascs: [],
        descs: [],
        condition: {
          beginDate:
            this.formInline.runTimeRange != null &&
            this.formInline.runTimeRange.length > 0
              ? this.formInline.runTimeRange[0]
              : '',
          endDate:
            this.formInline.runTimeRange != null &&
            this.formInline.runTimeRange.length > 0
              ? this.formInline.runTimeRange[1]
              : '',
          sort: this.formInline.sort,
          orgSeq: this.resone,
        },
      };
      queryZqData(data).then((res) => {
        this.tableData = res.records;
        this.total = res.total;
      });
    },
    searchone() {
      let data = {
        size: this.listQueryone.size,
        current: this.listQueryone.current,
        ascs: [],
        descs: [],
        condition: {
          beginDate:
            this.formInline.runTimeRange2 != null &&
            this.formInline.runTimeRange2.length > 0
              ? this.formInline.runTimeRange2[0]
              : '',
          endDate:
            this.formInline.runTimeRange2 != null &&
            this.formInline.runTimeRange2.length > 0
              ? this.formInline.runTimeRange2[1]
              : '',
          upOrgZone: this.formInline.upOrgZone,
          baseName: this.formInline.baseName,
          sort: this.formInline.sort,
          orgSeq: this.resone,
        },
      };
      queryBaseData(data).then((res) => {
        this.tableData1 = res.records;
        this.total = res.total;
      });
    },
    searchtwo() {
      let data = {
        size: this.listQuerytwo.size,
        current: this.listQuerytwo.current,
        ascs: [],
        descs: [],
        condition: {
          upOrgZone: this.formInline.upOrgZone,
          authCode: this.formInline.authCode,
          storeName: this.formInline.storeName,
          companyName: this.formInline.companyName,
          isGoods: this.formInline.isGoods,
          baseName: this.formInline.baseName,
          orgSeq: this.resone,
          beginDate: !this.value4
            ? ''
            : this.value4.length == 0
            ? ''
            : this.value4[0] + ' 00:00:00',
          endDate: !this.value4
            ? ''
            : this.value4.length == 0
            ? ''
            : this.value4[1] + ' 23:59:59',
        },
      };
      queryStoreData(data).then((res) => {
        this.tableData2 = res.records;
        this.total2 = res.total;
      });
    },
    mouseEnter(index) {
      this.formInline.sort = 1;
      this.isActive = index;
      if (index == 0) {
        this.type = '1';

        (this.paiming = true),
          (this.paimingone = false),
          (this.paimingtwo = false),
          this._memberManage();
      } else if (index == 1) {
        this.type = '2';

        (this.paiming = false),
          (this.paimingone = true),
          (this.paimingtwo = false),
          this._memberManageone();
      } else if (index == 2) {
        this.type = '3';

        (this.paiming = false),
          (this.paimingone = false),
          (this.paimingtwo = true),
          this._memberManagetwo();
      }
    },
    _memberManage() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        ascs: [],
        descs: [],
        condition: {
          warZoneName: this.formInline.upOrgZone,
          sort: this.formInline.sort,
          orgSeq: this.resone,
        },
      };
      queryZqData(data).then((res) => {
        this.loading = false;
        this.tableData = res.records;
        this.total = res.total;
      });
    },
    _memberManageone() {
      let data = {
        size: this.listQueryone.size,
        current: this.listQueryone.current,
        ascs: [],
        descs: [],
        condition: {
          sort: this.formInline.sort,
          warZoneName: this.formInline.upOrgZone,
          baseName: this.formInline.baseName,
          orgSeq: this.resone,
        },
      };
      queryBaseData(data).then((res) => {
        this.loading = false;
        this.tableData1 = res.records;
        this.total1 = res.total;
      });
    },
    _memberManagetwo() {
      let data = {
        size: this.listQuerytwo.size,
        current: this.listQuerytwo.current,
        ascs: [],
        descs: [],
        condition: {
          sort: this.formInline.sort,
          warZoneName: this.formInline.upOrgZone,
          authCode: this.formInline.authCode,
          storeName: this.formInline.storeName,
          baseName: this.formInline.baseName,
          isGoods: this.formInline.isGoods,
          orgSeq: this.resone,
        },
      };
      queryStoreData(data).then((res) => {
        this.loading = false;
        this.tableData2 = res.records;
        this.total2 = res.total;
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.listQuery.size = val;
      this._memberManage();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.listQuery.current = val;
      this._memberManage();
    },
    handleSizeChangeone(val) {
      console.log(`每页 ${val} 条`);
      this.listQueryone.size = val;
      this._memberManageone();
    },
    handleCurrentChangeone(val) {
      console.log(`当前页: ${val}`);
      this.listQueryone.current = val;
      this._memberManageone();
    },
    handleSizeChangetwo(val) {
      console.log(`每页 ${val} 条`);
      this.listQuerytwo.size = val;
      this._memberManagetwo();
    },
    handleCurrentChangetwo(val) {
      console.log(`当前页: ${val}`);
      this.listQuerytwo.current = val;
      this._memberManagetwo();
    },
    handleSortone(val) {
      let sortModel = '';
      if (val.order === 'ascending') {
        sortModel = 'ASC';
        if (val.prop == 'salesRate') {
          this.formInline.sort = 1;
          this.search();
        }
      } else if (val.order === 'descending') {
        sortModel = 'DESC';
        if (val.prop == 'salesRate') {
          this.formInline.sort = 2;
          this.search();
        }
      }
    },
    handleSorttwo(val) {
      let sortModel = '';
      if (val.order === 'ascending') {
        sortModel = 'ASC';
        if (val.prop == 'salesRate') {
          this.formInline.sort = 1;
          this.searchone();
        }
      } else if (val.order === 'descending') {
        sortModel = 'DESC';
        if (val.prop == 'salesRate') {
          this.formInline.sort = 2;
          this.searchone();
        }
      }
    },
  },
};
</script>
<style lang="less" scoped>
.toptitle {
  border: 1px solid #e0e0e0;
  border-bottom: 2px solid #188097;
  background: #f5f5f5;
  line-height: 35px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
}

.limttable {
  width: 500px;
  float: left;
}

.limttree {
  display: inline-block;

  border-top: 48px solid rgb(238, 241, 246);
  width: 206px;
  margin-left: 150px;
}

.demo-form-inline {
  //   border: 1px solid #ebeef5;
  padding: 20px 10px 3px 30px;
  margin-bottom: 25px;
}

.toptitle {
  border: 1px solid #e0e0e0;
  border-bottom: 2px solid #188097;
  background: #f5f5f5;
  line-height: 35px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
}

.limttreecontain {
  height: 260px;
  width: 200px;
  overflow: scroll;
  border: 1px solid #ccc;
}

.order_content {
  width: 350px;
  height: 120px;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.order_content .order_total_info {
  margin: 10px 0;
}

.order_content .order_data {
  font-size: 1.4em;
  font-weight: bold;
}

.order_content .compared_title {
  font-size: 0.8em;
  color: #999;
}

.demo-form-inline .el-form-item {
  margin-bottom: 0px;
}

.el-row {
  margin-bottom: 0px !important;
}

.active .order_total_title {
  background: #409eff;
  color: #fff !important; // 选中字体背景跟着改变
}
</style>
